<script setup>
import { reactive, ref } from 'vue'
import tableData from '~mock/auth'

// 表单数据
const formData = reactive({
  role_name: '',
  role_id: 0,
  auth_ids: '',
  auth_ids_son: ''
})
// 抽屉状态
const state = ref(false)

// 暴露
defineExpose({
  state,
  formData
})
</script>
<template>
  <!-- 抽屉 -->
  <el-drawer
    v-model="state"
    :title="formData.role_name ? '编辑角色' : '添加角色'"
    direction="rtl"
    :before-close="() => (state = false)"
  >
    <el-form v-if="state" size="large" label-width="80" :model="formData">
      <el-form-item label="角色名称">
        <!-- <el-input type="text" placeholder="请输入角色名称" disabled value="超级管理员 " /> -->
        <el-input type="text" placeholder="请输入角色名称" v-model="formData.role_name" />
      </el-form-item>
      <el-form-item label="角色顺序">
        <el-input type="number" placeholder="请输入角色顺序" v-model="formData.role_name" />
      </el-form-item>
      <el-form-item label="角色状态" prop="">
        <el-radio-group v-model="formData.state" class="ml-4">
          <el-radio label="1" size="large">正常</el-radio>
          <el-radio label="2" size="large">停用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="菜单权限">
        <el-tree
          :data="tableData.data"
          :props="{
            label: 'auth_name',
            value: 'auth_id'
          }"
          show-checkbox
        ></el-tree>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" placeholder="请输入备注" :rows="3" />
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary">确定</el-button>
        <el-button type="default" @click="state = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
  <!-- 抽屉 -->
</template>
<style lang="scss" scoped></style>
